<template>
    <div class="app-container score_ex_exam_allot_place">
        <el-card class="box-card" :key="placeId+num">
            <div slot="header" class="clearfix">
                <el-popover placement="right" width="300">
                    <el-form ref="form" :model="form" label-width="80px" size="mini">
                        <el-form-item label="现场考官" prop="sceneExaminer">
                            <el-select v-model="form.sceneExaminer" placeholder="请选择现场考官" clearable>
                                <el-option v-for="item in teacherList" :key="item.userId" :label="item.nickName" :value="item.userId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="中控考官" prop="sceneExaminer">
                            <el-select v-model="form.centerExaminer" placeholder="请选择中控考官" clearable>
                                <el-option v-for="item in teacherList" :key="item.userId" :label="item.nickName" :value="item.userId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="远程考官" prop="sceneExaminer">
                            <el-select v-model="form.sshExaminer" placeholder="请选择远程考官" clearable>
                                <el-option v-for="item in teacherList" :key="item.userId" :label="item.nickName" :value="item.userId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="标准病人" prop="sceneExaminer">
                            <el-select v-model="form.simulatedPatient" placeholder="请选择标准病人" clearable>
                                <el-option v-for="item in simulatedPatientList" :key="item.userId" :label="item.nickName" :value="item.userId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="text-align: right">
                            <el-button type="info" @click="handleClearSessionExaminer()" plain>重置</el-button>
                            <el-button type="primary" @click="handleUpdateSession()" plain>提交</el-button>
                        </el-form-item>
                    </el-form>
                    <el-button slot="reference" style="font-size:20px;font-weight: bold;float: left" size="mini"
                               type="primary" plain>
                        {{ placeData[placeId].placeName + '-' + (num + 1) }}
                    </el-button>
                </el-popover>
                <el-popover  placement="top" width="300" trigger="focus"
                             :title="placeData[placeId].skillName" :content="placeData[placeId].sheetsStr">
                    <el-button slot="reference" style="text-align: center;font-size: 14px;font-weight: bold;float: right;" type="warning" plain>{{placeData[placeId].skillName}}</el-button>
                </el-popover>
            </div>
            <el-table :data="place" height="230" style="width: 400px;margin: 0;top: -10px" size="mini">
                <el-table-column align="center" prop="code" label="代号" width="65">
                    <template scope="scope">
                        <span v-if="scope.row.userName == null">{{ scope.row.code }}</span>
                        <el-tooltip class="item" v-else effect="light" :content="scope.row.userName" placement="top">
                            <el-tag type="warning">{{ scope.row.code }}</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="startTime" label="开始" width="100"/>
                <el-table-column align="center" prop="endTime" label="结束" width="100"/>
            </el-table>
        </el-card>
    </div>
</template>
<script>

import {updateEx_score_exam_session,getEx_score_exam_session,clear_session_examiner} from "@/api/score/ex_score_exam_session"
export default {
    name: "ex_exam_allot_place",
    props: {
        place: {
            type: Array,
            default: [],
        },
        num: {
            type: Number
        },
        placeId: {
            type: String
        },
        timeId: {
            type: String
        },
        date: {
            type: String
        },
        placeData: {
            type: Object,
            default: {}
        },
        sessionData: {
            type: Object,
            default: {}
        },
        teacherList: {
            type: Array,
            default: []
        },
        simulatedPatientList: {
            type: Array,
            default: []
        },
    },
    watch: {},
    data() {
        return {
            form: {},
        };
    },
    created() {
        this.form = this.sessionData[this.parseKey()];
    },
    methods: {
        /** 拼接设置考官和标准化病人的key */
        parseKey() {
            return `${this.date}-${this.timeId}-${this.placeId}-${(this.num + 1)}`;
        },
        /** 修改节次信息 */
        handleUpdateSession(){
            this.form.scoreExExamPlaceAllotList = null;
            updateEx_score_exam_session(this.form).then(response=>{
                this.getSession();
                this.$modal.msgSuccess("提交成功");
            })
        },
        /** 重置考官信息 */
        handleClearSessionExaminer(){
            clear_session_examiner(this.form.id).then(response=>{
                this.getSession();
                this.$modal.msgSuccess("重置成功");
            })
        },
        /** 查询节次信息 */
        getSession(){
            getEx_score_exam_session(this.form.id).then(response=>{
                this.form = response.data;
            })
        },
    }
};
</script>
<style>
.score_ex_exam_allot_place .box-card { /* 单个卡片 */
    width: 300px;
    height: 310px;
    max-height: 310px;
    padding: 0;
    margin: 0;
}

.score_ex_exam_place .el-card__body{
    height: 310px !important;
}

.score_ex_exam_allot_place .card_header_button_box {
    float: right;
}

.score_ex_exam_allot_place .card_header_button {
    padding: 0;
}

.score_ex_exam_allot_place .card_header_button_delete {
    width: 100%;
    height: 15px;
    text-align: right;
}

.score_ex_exam_allot_place .card_header_button_option {
    width: 100%;
    height: 15px;
    float: right;
}

.score_ex_exam_allot_place .el-card {
    border-radius: 15px;
    border-color: #C0C4CC;
}

.score_ex_exam_allot_place .el-card__header {
    background: #E6FEEE;
}

.score_ex_exam_allot_place .el-card__body {
    height: 100%;
    background: #F5FEF2;
}
</style>
